<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传或修改头像</title>
    <script src="jquery.min.js"></script>
    <script src="jquery.form.js"></script>
    <link rel="stylesheet" href="css/Photo_add.css">
</head>

<!-- <script type="text/javascript">
    $(function(){
        $("#file_upload").ajaxForm(function(res){
            //console.log(res);
            //console.log("111111111111");
            alert("111111");
        });
    });
    // $("submit").click(function(){
    //     $("#file_upload").ajaxForm(function(res){
    //         if (res.code == 200){
    //             location.href = "myblog_list.html";
    //         }else{
    //             alert("上传失败"+ res.msg);
    //         }
    //     });
    // });
</script> -->

<body>
    <form action="/user/addPhoto" method="post" enctype="multipart/form-data" id="file_upload">
        <p>图片预览：</p>
        <img id="image-preview" src="./img/avatar1.png">
        <p>
        <input type="file" id="file" name="upload_image" accept="image/gif, image/jpeg, image/png, image/jpg">
        <input type="submit" id="submit" value="确认更换" />
        <!-- 关闭这个页面 -->
        <a href="myblog_list.html"><input type="button" value="完成"></a>
        </p>
        <p id="info"></p>
    </form>
    
    

    <script type="text/javascript">
        let fileInput = document.getElementById('file');
        let info = document.getElementById('info');
        let preview = document.getElementById('image-preview');
        // 监听change事件:
        fileInput.addEventListener('change', function() {
            // 清除背景图片:
            preview.style.backgroundImage = '';
            if (!fileInput.value) {
                info.innerHTML = '没有选择文件';
                return;
            }
            let file = fileInput.files[0];
            let size = file.size;
            if (size >= 1 * 1024 * 1024) {
                alert('文件大小超出限制');
                info.innerHTML = '文件大小超出限制';
                return false;
            }
            // 获取File信息:
            info.innerHTML = `文件名称:  + ${file.name}<br>文件大小: ${file.size} <br>上传时间: ${file.lastModifiedDate}`;
            if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
                alert('不是有效的图片文件!');
                return;
            }
            // 读取文件:
            let reader = new FileReader();
            reader.onload = function(e) {
                let data = e.target.result;
                console.log(preview, 'a标签')
                preview.src = data
            };
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(file);

        });

        // function save() {

        //     var url = preview.src; // 获取图片地址
        //     var a = document.createElement('a'); // 创建一个a节点插入的document
        //     var event = new MouseEvent('click') // 模拟鼠标click点击事件
        //     a.download = 'beautifulGirl' // 设置a节点的download属性值
        //     a.href = url; // 将图片的src赋值给a节点的href
        //     a.dispatchEvent(event)
        // }
    </script>
</body>
